<template>
    <div class="app-container">
        <el-form :model="form" status-icon ref="ruleForm" label-width="100px" class="el-form">
            <el-form-item label="标题" prop="title">
                <el-input type="text" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="type">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="封面">
                <!-- <el-image :src="form.cover" style="height: 200px" fit="cover" v-show="showImg" >
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline" />
                    </div>
                </el-image> -->
                <el-upload ref="uploadFile" class="cover-uploader" name="file" :headers="headerObj" drag :action="uploadUrl"
                    :on-success="handleImageSuccess" with-credentials :show-file-list="false">
                    <img v-show="form.cover" :src="form.cover" class="cover">
                    <i v-show="!form.cover" class="el-icon-plus cover-uploader-icon"></i>
                    <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
                </el-upload>
            </el-form-item>
            <el-form-item>
                <v-md-editor v-model="content" :disabled-menus="[]" @upload-image="handleUploadImage"
                    @save="save"></v-md-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="submitForm('ruleForm')">提交</el-button>
                <el-button type="warning" @click="goBack()" plain>关闭</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
 
<script>
import { uploadImage, addBlog, getBlogDetail, updateBlog } from '@/api/blog'
import { mapGetters } from 'vuex'

export default {
    name: 'EditBlog',
    computed: {
        ...mapGetters([
            'token'
        ])
    },
    data() {
        return {
            form: {
               cover: ''
            },
            options: [{
                value: 1,
                label: '游记'
            }, {
                value: 2,
                label: '攻略'
            }],
            value: '',
            content: '',
            uploadUrl: process.env.VUE_APP_BASE_API + '/travel/updateAttrBanner',
            headerObj: '',
            showImg: false,
            bid: ''
        }
    },
    created() {
        console.log(this.$route.query)
        if (this.$route.query.bid) {
            this.bid = this.$route.query.bid
            this.getBlogDetail(this.bid)
        }
        this.headerObj = {
            'token': this.token
        }
    },
    methods: {
        handleUploadImage(event, insertImage, files) {
            console.log(files)
            console.log(insertImage)
            for (let i in files) {
                // const formData = new FormData();
                // formData.append('file', files[i])
                uploadImage(files[i]).then(res => {
                    if (res.code === 200) {
                        console.log('图片上传成功')
                        // 上传成功后回显
                        insertImage({
                            url: res.imgUrl,
                            desc: '无',

                        });
                    } else {
                        console.log(res.msg)
                    }
                })
            }
        },
        save(text, html) {
            console.log(text)
            console.log(html)
            this.form.content = text
            // this.form.content = html
            console.log(this.form)
        },
        async submitForm() {
            
            if (this.$route.query.bid) {
                console.log('修改方法')
                this.form.bid = this.bid
                console.log(this.form)
                const res = await updateBlog(this.form)
                console.log(res)
                if (res.code === 200) {
                    this.$message.success('修改成功')
                    this.$router.go(-1)
                } else {
                    this.$message.error('修改失败')
                }

            } else {
                const res = await addBlog(this.form)
                if (res.code === 200) {
                    this.$message.success('发布成功')
                    this.form = {}
                    this.$router.go(-1)
                } else {
                    this.$message.error('发布失败')
                }
            }
        },
        handleImageSuccess(res) {
            console.log(res)
            if (res.code === 200) {
                const { bannerUrl } = res.data
                this.form.cover = bannerUrl
                console.log(this.form)
                // this.showImg = true
            } else {
                this.$message.error(res.message)
            }
        },
        async getBlogDetail(id) {
            const res = await getBlogDetail(id)
            if (res.code === 200) {
                const { blog } = res.data
                this.form = blog
                this.content = this.form.content
            } else {
                console.log('查询失败')
            }
        },
        goBack() {
            this.$router.back()
        }
    }
}
</script>
 
<style lang="less" scoped>
.app-container {
    width: 1000px;
    margin: 0 auto;

    .el-form {
        margin-top: 20px;

        .el-upload{
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .cover {
            height: 200px;
            width: 360px;
            display: block;
            object-fit: cover;
        }

        .cover-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
    }
}
</style>